<template>
	<view class="">
		<view class="artistesBox" v-for="(item,key) in ArtisterList" :key="item.UserID">
			<view class="artInfos" @click="gotoArtiter(item.UserID)">
				<view class="artHeadPic">
					<view style="position:absolute;z-index:50;right:-5rpx;top:-10rpx" v-if="item.isAuthOk == 2">
						<image :src="baseUrl + 'icon/authed.png'" style="width:25rpx;height:25rpx;"></image>
					</view>
					<image :src="item.WxHeadPic"></image>
				</view>
				<view class="artInfo">
					<view class="artName">
						<text>{{item.NickName}}</text>
						<image :src="baseUrl + 'icon/boy.png'" style="width:25rpx;height:25rpx;"
							v-if="JSON.parse(item.UserSex).text === '男'"></image>
						<image :src="baseUrl + 'icon/girl.png'" style="width:25rpx;height:25rpx;"
							v-if="JSON.parse(item.UserSex).text === '女'"></image>
						<view v-if="item.BeautifulWomen == 1" class="personalityLabel" style="font-size:22rpx;height:34rpx;line-height:34rpx;border-radius: 8rpx;background:linear-gradient(to bottom, #fb2529,#fb6066);color: #fff;padding: 2rpx 10rpx;margin-left: 10rpx;">
							颜值美女
						</view>
					</view>
					<view class="artLabel">
						<view>
							<text v-for="(roleitem,roleindex) in item.Roles" :key="roleindex">
								{{ roleitem.LabelName }}
								<text v-if="roleindex < item.Roles.length-1">・</text>
							</text>
						</view>
						<view class="geline"> | </view>
						<view class="artAddr">{{ item.UserCity }}</view>
					</view>
				</view>
				<view class="artState">
					<view style="font-size:24rpx;" v-if="item.isOnline == 1">在线</view>
					<view style="font-size:24rpx;" v-else>
						{{ $common.timeDiff(item.onlineTime,new Date()) }}
					</view>
				</view>
			</view>
			<view class="artPics" @click="showPhoto(item.UserPhotos)" v-if="item.UserPhotos.length > 0">
				<view class="artPic" v-for="(itm,idx) in item.UserPhotos" :key="idx" v-if="idx<3">
					<image :src="itm" mode="aspectFill"></image>
					<view class="" v-if="idx == 2" style="display: table-cell;vertical-align: middle;">
						<view class="artPicCount" v-if="item.UserPhotosCount > 3">
							<uni-icons type="image" size="14" color="#fff"></uni-icons>
							<text style="margin-left: 5rpx;">{{item.UserPhotosCount }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'artistes',
		props: {
			ArtisterList: {
				type: Array,
				default: [],
			}
		},
		data() {
			return {
				ArtisterListData: [],
				baseUrl: ''
			}
		},
		mounted() {
			this.baseUrl = this.$baseUrl;
		},
		methods: {
			gotoArtiter(artisterID) {
				uni.navigateTo({
					url: '/artistesPages/pages/artister?artisterID=' + artisterID
				})
			},
		}

	}
</script>

<style>
	.artistesBox {
		margin-top: 20rpx;
		height: auto;
		background-color: #FFF;
		border-radius: 15rpx;
		padding: 26rpx;
		padding-bottom: 40rpx;
	}

	.artInfos {
		// display: flex;
		// justify-content: space-between;
		height: 60rpx;
	}

	.artHeadPic {
		position: relative;
		float: left;
		width: 80rpx;
		height: 80rpx;
		background-color: #CCC;
		/* // background-image: url('https://hbimg.huabanimg.com/53392e6876c6a69c39da3a2a63c3a62ed4f9d26d23a781-4ckBVh_fw658'); */
		background-position: center;
		background-size: cover;
		border-radius: 80rpx;
	}

	.artHeadPic image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
	}

	.artInfo {
		float: left;
		width: 60vw;
		margin-left: 20rpx;
	}

	.artName {
		font-size: 30rpx;
	}

	.artLabel {
		display: flex;
		font-size: 20rpx;
		color: #999
	}

	.artState {
		width: 100rpx;
		float: right;
		text-align: right;
		color: #999
	}

	.artPics {
		clear: both;
		position: relative;
		display: flex;
		// justify-content: space-between;
		margin-top: 40rpx;
	}

	.artPic {
		width: 30vw;
		height: 250rpx;
		background-color: #e0e0e0;
		margin: 10rpx;
		position: relative;
	}

	.artPic image {
		width: 100%;
		height: 250rpx;
	}

	.artPicCount {
		position: absolute;
		z-index: 50;
		bottom: 0;
		right: 0;
		width: 60rpx;
		height: 30rpx;
		padding: 5rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #FFF;
		text-align: center;
		border-radius: 10rpx;
		font-size: 20rpx;
	}
</style>